<template>
  <div class="main">
    <div class="content">
      <div class="content-item" v-for="(item, index) in articles"
           :key="index" @click="gotoDetail(item)">
        <!--        <img v-if="item.picture !='string'" :src="store.state.imgUrl +item.picture">-->
        <div v-if="item.picture" class="three-artile-right"
             :style="{ backgroundImage: `url(${store.state.imgUrl +item.picture}` }"></div>
        <!--        <img v-else :src="shopBg">-->
        <div class="param">{{ item.name }}</div>
        <div class="num">
          <div class="dz">{{ item.price }}元</div>
          <div class="yj">{{ item.oldPrice }}元</div>
          <div class="pel">{{ item.buyNum || 0 }}人购买</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import store from "../../../store";

export default {
  name: "shopListItem",
  props: {
    articles: {
      type: Array,
      required: true // 必选
    },
  },
  data() {
    return {
      shopBg: require('@/assets/shopping/shopBg.png'),
      store: store,

    }
  },
  mounted() {
  },
  methods: {
    gotoDetail(item) {
      this.$store.dispatch('shopping/setDetailId', item.id)
      this.$store.dispatch('shopping/setSkuId', item.skuId)
      //从商城首页进入详情页面 存一个参数
      this.$store.state.isShopping = 1
      this.$router.push({
        path: "/detail", query: {}
      });
      let message = {
        action: 'hiddenBottom',
        param: {}
      }
      getInfoFromVue.postMessage(JSON.stringify(message))
    },
  }
}
</script>

<style scoped lang="less">
.main {
  width: 100%;
  //height: 100vh;
  .content {
    padding-top: 10px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    //max-height: 154px;
    //overflow-y: scroll;

    //.selected {
    //  background-color: rgba(242, 150, 0, 1);
    //  border-color: rgba(242, 150, 0, 1) !important;
    //  color: #ffffff !important;
    //}

    .content-item {
      padding: 5px;
      //flex-shrink: 0;
      width: calc((100% - 34px) / 2);
      //height: 27px;
      margin-right: 14px;
      height: 224px;
      opacity: 1;
      border-radius: 9px;
      background: rgba(255, 255, 255, 1);
      box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.25);
      margin-bottom: 10px;

      .three-artile-right {
        width: 100%;
        height: 164.43px;
        opacity: 1;
        border-radius: 9px 9px 0px 0px;
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
      }

      .param {
        width: 100%;
        font-size: 15px;
        font-weight: 400;
        line-height: 24px;
        color: rgba(29, 22, 23, 1);
        text-overflow: ellipsis;
        overflow: hidden;
        display: inline-block;
        white-space: nowrap;
        padding: 5px 5px 0px;
      }

      .num {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0px 5px 5px;

        .dz {
          font-size: 17px;
          font-weight: 400;
          letter-spacing: 0px;
          line-height: 24.62px;
          color: rgba(255, 0, 0, 1);
          text-align: right;
          vertical-align: top;
        }

        .yj {
          text-decoration: line-through;
          font-size: 12px;
          font-weight: 400;
          letter-spacing: 0px;
          line-height: 17.38px;
          color: rgba(199, 199, 199, 1);
          text-align: center;
          vertical-align: top;
        }

        .pel {
          font-size: 12px;
          font-weight: 400;
          letter-spacing: 0px;
          line-height: 17.38px;
          color: rgba(166, 166, 166, 1);
          text-align: center;
          vertical-align: top;
        }
      }
    }

    .content-item:nth-of-type(2n + 0) {
      margin-right: 0px;
    }
  }
}
</style>
